import Layout from "../../components/Layout";
import { Box, Heading, Divider, Text } from "@chakra-ui/react";
import { css } from '@emotion/core'
import axios from "axios";
import { baseUrl } from "../../axiosConfig";

const DetailContainer = css`
  padding: 10px 0;
  & > p {
    font-size: 14xp;
    margin-bottom: 10px;
  }
  & > img {
    margin-bottom: 10px;
    display: block;
  }
`

export default function Deatil({detail}) {
  return (
    <Layout>
      <Box maxW="1200px" mx="auto" mt="70px">
        <Heading as="h2" size="xl" mb="10px">
          {detail.title}
        </Heading>
        <Heading as="h4" size="lg" color="gray.500" fontWeight="light">
        {detail.sub}
        </Heading>
        <Divider mt="10px" />
        <Box overflow="hidden" mt="10px">
          <Text float="left">作者: {detail.author}</Text>
          <Text float="right">发布时间: {detail.publish}</Text>
        </Box>
        <Divider mt="10px" />
        <Box css={DetailContainer} dangerouslySetInnerHTML={{__html: detail.content}}>
        </Box>
      </Box>
    </Layout>
  );
}
// 获取到用户能访问到的所有路由参数
export async function getStaticPaths () {
  let { data } = await axios.get('/api/videos', {
    baseURL: baseUrl
  })
  let paths = data.map(id => ({
    params: {id}
  }))
  return {
    paths,
    fallback: false
  }
}

// 根据参数获取其对应的数据
export async function getStaticProps ({params}) {
  const id = params.id
  let { data: detail } = await axios.get(`/api/detail?id=${id}`, {
    baseURL: baseUrl
  })
  return {
    props: {
      detail
    }
  }
}

